<template>
  <view>
    <u-navbar title="提现" title-size="36" back-icon-color="#333" title-color="#333">
      <!-- <view slot="right">
				<view @click="routeTo('/other/withdrawal-order/withdrawal-order')" style="margin-right: 20rpx;">
					提现记录
				</view>
			</view> -->
    </u-navbar>
    <view class="contentView">
      <view class="headTitle">提现金额</view>
      <view class="inputView">
        <view>¥</view>
        <input
          class="inputData"
          placeholder="输入提现金额"
          placeholder-style="color:#CDCDCD"
          v-model="cash_amount"
        />
      </view>
      <view class="moneyView"
        >可提现金额¥{{ balance }},提现手续费约{{ (balance * 0.0001).toFixed(2) }}；<text
          @click="onAllPost()"
          >全部提现</text
        ></view
      >
    </view>
    <view class="contentView">
      <view @click="current = 1" class="itemView">
        <u-icon name="/static/wxzf.png" size="48"></u-icon>
        <view class="itemTitle">
          提现至微信
          <view class="itemTitle-tip">
            <text style="color: #999999">已绑定：张三</text>
            [更换]
          </view>
        </view>
        <u-icon v-if="current == 1" name="/static/selected.png" size="36"></u-icon>
        <view v-else class="checked"></view>
      </view>

      <!-- <view @click="current = 2" class="itemView">
				<u-icon name="/static/img/zfbzf.png" size="50"></u-icon>
				<view class="itemTitle">
					提现至支付宝
					<view class="itemTitle-tip">
						已绑定：136*****556[更换]
					</view>
				</view>
				<u-icon v-if="current == 2" name="/static/img/xzz2.png" size="36"></u-icon>
				<view v-else class="checked"></view>
			</view> -->

      <view class="itemView">
        <u-icon name="/static/yhk.png" size="64"></u-icon>
        <view class="itemTitle" @click="routeTo('/other/bank-card-list/bank-card-list')">
          提现至银行卡
          <view class="itemTitle-tip" v-if="cardNo">
            <text style="color: #999999">已绑定：{{ cardNo }}</text
            >[更换银行卡]
          </view>
          <view class="itemTitle-tip" v-else style="color: #999999"> 请绑定本人银行卡 </view>
        </view>
        <u-icon v-if="current == 3" name="/static/selected.png" size="36"></u-icon>
        <view @click="checkCurrent(3)" v-else class="checked"></view>
      </view>
    </view>

    <view class="applyView" @click="onApply()">申请提现</view>
    <view class="tipsView dis-flex flex-y-center">
      <view @click="routeTo('/other/withdrawal-order/withdrawal-order')">提现记录</view>
      <view style="margin: 0 20rpx">|</view>
      <view @click="routeTo('/universal/webcontent/webcontent?key=withdraw')">提现说明</view>
      <!-- <view>1、提现手续费约0.1%；（到账金额会根据银行卡实际手续费率扣除）</view> -->
      <!-- <view>2、提现时间：9:00~18:00 周一至周六</view> -->
      <!-- <view>3、到账时间72小时内</view> -->
    </view>
    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="showSvipModel"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content svip-content">
            <view class="tl">温馨提示</view>
            <view class="des">尊敬的用户，您还未开通平台会员， 您暂时不能佣金提现操作！</view>
            <view class="bt" @click="toSvip()">立即开通</view>
          </view>
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="showSvipModel = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="showJijinModel"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content svip-content jijin-content">
            <view class="tl">温馨提示</view>
            <view class="des" style="padding: 10rpx; margin-bottom: 20rpx"
              >尊敬的会员用户，您提现金额为<text
                style="font-weight: 600; font-size: 36rpx; margin-right: 10rpx"
                >¥198.00 </text
              >本次扣除
              <text style="font-weight: 600; font-size: 36rpx; margin: 0 20rpx; color: #fa453c"
                >¥1.98
              </text>
              到基金会</view
            >
            <u-line></u-line>
            <view class="check-group dis-flex flex-y-center">
              <view class="check-item dis-flex flex-y-center">
                <view @click="isChecked = true" v-if="!isChecked" class="select"></view>
                <u-icon v-else name="/static/selected.png" size="36"></u-icon>
                <text style="margin-left: 20rpx">我已同意</text>
              </view>
              <view class="check-item dis-flex flex-y-center">
                <view @click="isChecked = false" v-if="isChecked" class="select"></view>
                <u-icon v-else name="/static/selected.png" size="36"></u-icon>
                <text style="margin-left: 20rpx">我不同意</text>
              </view>
            </view>
            <view class="contect">联系客服</view>
          </view>
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="showJijinModel = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="successPopup"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content svip-content">
            <u-icon
              style="margin-bottom: 30rpx; margin-top: 10rpx"
              name="/static/sussces.png"
              size="72"
            ></u-icon>
            <view class="des" style="padding: 0 70rpx; margin-bottom: 20rpx"
              >您已提现成功，恭喜您爱心捐赠
              <text style="font-weight: 600; font-size: 36rpx; margin-right: 10rpx"
                >¥1.98
              </text></view
            >
            <view
              class="bt"
              style="width: 320rpx; margin-top: 50rpx"
              @click="routeTo('/jijin/index')"
              >进入公益基金中心</view
            >
          </view>
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="successPopup = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      successPopup: false,
      showSvipModel: false,
      showJijinModel: false,
      balance: 0,
      cardNo: '',
      realName: '',
      cardName: '',
      cash_amount: '',
      isVip: false,
      isChecked: false
    }
  },
  onLoad() {
    this.initData()
    this.isVip = uni.getStorageSync('userInfo').isVip
  },
  methods: {
    initData() {
      let self = this
      // self.$u.api.getMyBills().then(res => {
      // 	self.balance = res.data.balance
      // });
      self.$u.api.getBankList({ isDefault: 1 }).then((res) => {
        console.log(res.data.length)
        if (res.data && res.data.length > 0) {
          self.cardNo = res.data[0].cardNo
          self.realName = res.data[0].realName
          self.cardName = res.data[0].cardName
        }
      })
    },
    onClose() {
      this.successPopup = false
      uni.navigateBack()
    },
    toSvip() {
      this.showSvipModel = false
      this.$u.route('/users/svip')
    },
    onAllPost() {
      this.cash_amount = this.balance
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    checkCurrent(index) {
      if (index == 3 && !this.cardNo) {
        this.$u.toast('请先绑定银行卡')
        return
      }
      this.current = index
    },
    onApply() {
      let self = this
      if (self.isVip) {
        this.showSvipModel = true
        return
      }
      if (this.$u.test.isEmpty(this.cash_amount)) {
        this.$u.toast('请输入提现金额')
        if (this.cash_amount < 10) {
          this.$u.toast('请输入提现金额大于10元')
          return
        }
      }
      if (this.$u.test.isEmpty(this.realName)) {
        this.$u.toast('请输入持卡人姓名')
        return
      }
      if (this.$u.test.isEmpty(this.cardNo)) {
        this.$u.toast('请输入银行卡号')
        return
      }
      if (this.$u.test.isEmpty(this.cardName)) {
        this.$u.toast('请输入开户银行名称')
        return
      }
      if (!this.isChecked) {
        this.showJijinModel = true
        return
      }
      self.$u
        .post('/app-api/trade/brokerage-withdraw/create', {
          cardholder: this.cardholder,
          bank_name: this.bank_name,
          bank_card_number: this.bank_card_number,
          price: this.cash_amount
        })
        .then((res) => {
          if (res.code === 0) {
            self.cash_amount = ''
            self.successPopup = true
          } else {
            self.$u.toast(res.msg)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
/* page {
		background: #F7F7F7;
	} */
.itemView:last-child {
  border: none;
}
::v-deep.tishi-warpper .teshu .u-mode-center-box {
  background-color: transparent !important;
}
.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
  }

  .ts-close {
    margin: auto;
    margin-top: 50rpx;
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.jijin-content {
  padding: 0 !important;
}
.svip-content {
  text-align: center;
  .tl {
    padding: 50rpx 20rpx 40rpx 20rpx;
    margin: auto;
    font-weight: 600;
    font-size: 34rpx;
    color: #333333;
  }
  .des {
    font-size: 30rpx;
    line-height: 50rpx;
    padding: 20rpx;
  }
  .bt {
    width: 280rpx;
    height: 80rpx;
    background: #10a28f;
    border-radius: 40rpx;
    margin: auto;
    margin-top: 70rpx;
    margin-bottom: 10rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    color: #ffffff;
  }
  .check-group {
    margin: 65rpx 100rpx;
    justify-content: space-between;
    .select {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      border: 1px solid #999999;
    }
  }
  .contect {
    width: 100%;
    height: 100rpx;
    background: #10a28f;
    font-size: 34rpx;
    color: #ffffff;
    line-height: 100rpx;
    text-align: center;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
  }
}
.contentView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 30rpx;
}

.headTitle {
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
}

.checked {
  width: 36rpx;
  height: 36rpx;
  border: #b8b8b8 solid 2rpx;
  border-radius: 36rpx;
}

.inputView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 0px;
  margin: 10rpx 0px;
  border-bottom: 1px solid #e7e7e7;
  font-size: 36rpx;
  font-weight: 400;
  color: #333333;
}

.inputData {
  flex: 1;
  margin-left: 20rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #333;
}

.moneyView {
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 20rpx;
}

.moneyView text {
  font-size: 28rpx;
  font-weight: 400;
  color: #10a28f;
  margin-left: 5rpx;
}

.itemView {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
  padding: 30rpx 0px;
}

.itemView2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 30rpx;
}

.itemTitle {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
  margin-left: 20rpx;
}

.itemTitle-tip {
  font-size: 24rpx;
}

.inputData2 {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
}

.applyView {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  background: #10a28f;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin: 0rpx 30rpx;
  margin-top: 100rpx;
}

.tipsView {
  display: flex;
  padding: 30rpx;
  line-height: 200%;
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  justify-content: center;
}

.popupView {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 570rpx;
  height: 430rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;
}

.popupImage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
}

.popupContent {
  text-align: center;
  margin-top: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #e5312c;
}

.popupContent2 {
  margin-top: 10rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.closeBtn {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: #10a28f;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 40rpx;
}
</style>
